Introduction

Sorting and filtering menu categories allow customers to find what they are looking quickly, which enhances their user experience. In this exercise, you will practice how to filter the Little Lemon menu via categories and text queries.

Scenario

After displaying the online menu in the application, the restaurant managers forecast a substantial increase in the number of dishes being offered for the new season. To facilitate the location of desired items, they have decided to implement some basic filtering in the menu, so that customers can better distill the information by choosing certain categories or using a search bar to find a specific dish.

Instructions

Step 1: Category list component

Implement a component that displays a list of categories. Then, represent each category visually.

The requirements for this component are as follows:

• The list should be scrollable.

• It should work similarly to a group of checkboxes, meaning that multiple categories can be selected at the same time.

• If a category is selected, it should be highlighted with a different background color and text color.

Step 2: Create an SQL query for categories

Create an SQL query to filter a group of categories. The query should kick in as soon as there is a change in the categories selected. There are multiple ways to tackle the implementation. Here are some recommendations:

• Leverage the useEffect hook to detect changes in the list of active categories and, if so, execute the SQL query as a side effect.

• You can place all database operations (via Expo-SQLite) in a separate file for better separation of concerns and cleaner code organization.

• If you decide to place all database operations in a separate file, try to create separate functions for each database operation you may need, such as creating a table, getting the menu items, saving the menu items, and filtering by categories.

Step 3: Banner component

Implement the UI for the hero banner component, also referred to as the main banner. This component contains a title, a subtitle, a description of the restaurant, an image, and finally, a search bar. It should be placed between the header and the list of categories as represented below. You can use this mockup as inspiration, but your final outcome doesn’t have to exactly mirror it. Again, feel free to style based on your personal preferences.

Step 4: Create an SQL query for dishes

Create a SQL query to filter by dish name text match . Follow the below specifications:

• Debounce the query search by 500ms to minimize unnecessary database hits while typing.

• The SQL query should filter by matches in the dish name. For example, the following dish names are available on the menu: Greek salad , Bruschetta , Grilled Fish , Pasta , and Lemon Dessert . If you type “Gr” in the search bar, the result of the query retrieves only two dishes, namely, Greek Salad and Grilled Fish, as both these dishes contain the substring “Gr”.

• If the category filter is also active, the query text filter takes that into account. So, the result is an intersection (AND boolean) of both filters applied.

Conclusion

In this exercise, you interacted with an SQLite database using the Expo-SQLite library, via different filtering conditions. This helps you envision multiple options, such as sorting capabilities, as well as more complex queries.